<template>
  <div class="kinds">
    <div class="w">
      <div class="keybrand fl">种类</div>
      <ul class="items fl" ref="items">
        <li class="item" v-for="c in classify" :key="c.id" @click="skip">
          {{ c.goodsCategory }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "Item",
  props: ["classify"],
  methods: {
    skip: function (event) {
      // 竞争商品的种类
      //  console.log(this.classify)
      var items = this.$refs.items;
      var index = 0;
      //点击元素对应的索引
      for (var i = 0; i < this.classify.length; i++) {
        //点击获取页面的值与分类对象比较
        if (event.target.innerText == this.classify[i].goodsCategory) {
          index = i;
        }
      }
      var timer = null,begin = 0;
      // 299猜我喜欢的高度 400一个种类的高度 距离顶部的高度 自身高度
      var target = index * 400 + 299 + event.target.offsetTop + items.offsetHeight;
      clearInterval(timer);
      timer = setInterval(function () {
        begin += (target - begin) * 0.2;

        if (Math.round(begin) >= target) {
          begin = target;
          clearInterval(timer);
        }
        document.documentElement.scrollTop = begin
      }, 10);
      // document.documentElement.scrollTop =index * 400 + 299 + event.target.offsetTop + items.offsetHeight;
      // 滚动条需要往后再滚动的距离
      //  console.log((index+1)*400+299)
      //  console.log(event.target)
      //  console.log(event.target.innerText)
      //  console.log(event.target.offsetTop)
      //  scrollTop
      //  console.log(event.target.$el.scrollTop)
    },
  },
};
</script>

<style scoped>
.kinds {
  width: 1920px;
  height: 124px;
  margin-top: 10px;
}
.w {
  width: 1200px;
  height: 100%;
  margin: 0 auto;
}
.keybrand {
  width: 50px;
  height: 100%;
  background-color: #f1f1f1;
  border: 1px solid #ddd;
  font-size: 16px;
  text-align: center;
  line-height: 124px;
  color: #333;
}
ul.items {
  width: 1150px;
  height: 100%;
  padding: 2px 50px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-left: none;
  overflow: scroll;
  overflow-x: hidden;
  overflow-y: hidden;
}
li.item {
  width: 120px;
  height: 50%;
  margin-left: 5px;
  border: 1px solid #e4e4e4;
  float: left;
  line-height: 60px;
  text-align: center;
  font-size: 18px;
  font-family: "楷体";
  font-weight: bold;
  color: red;
  cursor: pointer;
}
</style>